<template>
	<view>
		<!-- 选择时长的弹出层 -->
		<uni-popup ref="chooseCatePopup" type="bottom" :is-mask-click="false">
			<my-popup :popup="chooseCatePopup" title="选择时长">
				<!-- 选择时长单选框 -->
				<template #scrView>
					<radio-group @change="handleChange">
						<template v-for="item of typeArr" :key="item.name">
							<label class="radio-box flex-row-between-center">
								<view class="info-box flex-row-align-center">
									<view class="">{{ item.name }}</view>
									<view class="price">￥{{ item.price }}</view>
									<view v-show="item.isRecommand" class="">（推荐）</view>
								</view>
								<radio :checked="item.isRecommand" :value="item.name"></radio>
							</label>
						</template>
					</radio-group>
				</template>
				<template #footer>
					<button style="margin: 30rpx 18rpx; background: orange" @click="handleSubmit">提交</button>
				</template>
			</my-popup>
		</uni-popup>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const typeArr = [
	{ name: '1小时', price: 10, isRecommand: false },
	{ name: '2小时', price: 20, isRecommand: true },
	{ name: '3小时', price: 30, isRecommand: false }
];
let checked = typeArr.filter((t) => t.isRecommand)[0].name;
const chooseCatePopup = ref(null);
// 提交订单
function handleSubmit() {
	let price = typeArr.filter((t) => t.name === checked)[0].price;
	uni.navigateTo({
		url: `/subpkg/pay-order/pay-order?cate=${checked}&price=${price}`
	}); // 传助教名字，头像，陪打时长，价格
}
// 选项发生变化
function handleChange(e) {
	checked = e.detail.value;
}
defineExpose({ chooseCatePopup });
</script>

<style scoped lang="scss">
.radio-box {
	background: $uni-bg-color-grey;
	margin-bottom: 10rpx;
	padding: 10rpx 20rpx;
	border-radius: $uni-border-radius-base;
	.info-box {
		.price {
			margin-left: 10rpx;
			color: red;
		}
	}
}
</style>
